<template>
    <div>
        <el-button style="margin: 6px" type="primary" @click="btnClick">
            {{ "添加贴图" }}
        </el-button>
        <el-dialog
            :visible.sync="dialogVisible"
            title="设置贴图出现的时间段"
            width="50%"
        >
            <el-slider
                v-model="value"
                range
                :marks="marks"
                :format-tooltip="formatTip"
            />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirm">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import { addImage, getFirstFrame } from "@/module/useFfmpeg";
// import { mapState } from "vuex";
export default {
    props: ["obj"],
    data() {
        return {
            dialogVisible: false,
            value: [0, 100],
        };
    },
    computed: {
        // ...mapState({
        //     videoList: (state) => state.app.videoList,
        //     videoSelected: (state) => state.app.videoSelected,
        //     imageList: (state) => state.app.imageList,
        //     store: (state) => state.app.store,
        // }),
        marks() {
            return {
                0: "0s",
                100: `${
                    this.obj.videoList[this.obj.videoSelected]?.duration || 100
                }s`,
            };
        },
    },
    methods: {
        async vAddImage(timeT) {
            const fileName = `video${this.obj.videoId++}`;
            const selectItem = this.obj.videoList[this.obj.videoSelected];

            const videoUrl = await addImage(
                selectItem.videoUrl,
                selectItem.fileName,
                ...timeT
            );
            const { url: coverUrl, videoInfo } = await getFirstFrame(
                videoUrl,
                fileName
            );
            this.obj.videoList.push({
                videoUrl,
                coverUrl,
                fileName,
                videoInfo,
            });
        },
        btnClick() {
            this.dialogVisible = true;
        },

        formatTip(value) {
            return (
                (value * this.obj.videoList[this.obj.videoSelected]?.duration) /
                    100 +
                "s"
            );
        },

        confirm() {
            if (this.obj.imageList.length === 0) {
                return alert("请先上传贴图");
            }
            this.dialogVisible = false;
            let tmpA = this.value.map(
                (item) =>
                    (item *
                        this.obj.videoList[this.obj.videoSelected]?.duration) /
                    100
            );
            this.vAddImage(tmpA);
        },
    },
};
</script>